 
<template>
  <div class="rep_table_index" ref="indexRef">
    <div class="df jc-sb ai-c">
      <span style="white-space: nowrap;"> 选择日期： 
        <!-- <el-date-picker v-model="data_value" type="daterange" range-separator="到" start-placeholder="开始时间" end-placeholder="结束时间"  @change="data_change"
          :format="'YYYY-MM-DD'" value-format="YYYY-MM-DD" /> -->
          <el-date-picker v-model="data_value" type="month" placeholder="请选择" @change="data_change" :format="'YYYY-MM'" value-format="YYYY-MM" :disabled-date="disabledDate" />

        <lay-button @click="reset" :size="'sm'" style="margin-left: 10px;">重置</lay-button>
      </span>
      <h2></h2>
      <lay-button size="sm" type="primary" @click="export_tab"  v-permissions="'expore_table'" >导出报表</lay-button>
    </div>
 
    <div>
      <div class="margin_box">
        <el-scrollbar ref="scrollbarRef" @scroll="scroll" height="600px">
          <div ref="innerRef" style="position: relative;">
            <table ref="tableRef" class="report_table" v-if="allInfo?.allPeopleDetail?.length>0">

              <thead>
                <tr>
                  <!-- row  |        col  -     -->
                  <th rowspan="2" colspan="4" class="pst-l">单点评吸汇总</th>
                  <th rowspan="3">缺席日期</th>
                  <th :colspan="allInfo?.dayHeads?.length">日评吸明细</th>
                  <th :colspan="allInfo?.weekHeads?.length">周评吸明细</th>
                  <th :colspan="allInfo?.monthHeads?.length" v-if="allInfo?.monthHeads?.length>0">单点评吸明细</th>
                  <th :colspan="allInfo?.otherHeads?.length" v-if="allInfo?.otherHeads?.length>0">其他评吸明细</th>
                </tr>
                <tr>

                  <!-- dayHeads -->
                  <th v-for="(item,index) in allInfo.dayHeads" :key="index">{{item[0]}}</th>
                  <!-- weekHeads -->
                  <th v-for="(item,index) in allInfo.weekHeads" :key="index">{{item[0]}}</th>
                  <th rowspan="2" v-for="(item, index) in allInfo.monthHeads" :key="index">{{item}}</th>
                  <th rowspan="2" v-for="(item, index) in allInfo.otherHeads" :key="index">{{item}}</th>

                </tr>

                <tr>
                  <!-- monthCollectHeads -->
                  <th :class="[index<4?'pst-l':'',index<4?classWidthName[index]:'']" v-for="(item,index) in allInfo.monthCollectHeads" :key="index">
                    <div>
                      {{item}}
                    </div>
                  </th>
                  <th v-for="(item,index) in allInfo.dayHeads" :key="index">{{item[1]}}</th>
                  <th v-for="(item,index) in allInfo.weekHeads" :key="index">{{item[1]}}</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item,index) in allInfo.allPeopleDetail" :key="index">
                  <!-- <tr v-for="(item,index) in 100" :key="index"> -->
                  <td class="pst-i">
                    <div class="left-i">{{item.serialNo}}</div>
                  </td>
                  <td class="pst-name">
                    <div class="left-name">{{item.name}}</div>
                  </td>
                  <td class="pst-unblended">
                    <div class="left-unblended">{{item.unitNum}}</div>
                  </td>
                  <td class="pst-finished">
                    <div class="left-finished">{{item.productNum}}</div>
                  </td>
                  <td>-</td>
                  <td>-</td>
                  <td v-for="(dayItem,dayIndex) in item.daysNum" :key="dayIndex">{{dayItem==0?'-':dayItem}}  </td>
                  <!-- <template v-if="item.daysNum.length-1 !=allInfo.dayHeads.length">
                    <td v-for="(dayItem,dayIndex) in (allInfo?.dayHeads?.length - item?.daysNum?.length)-1" :key="dayIndex">-</td>
                  </template>  -->
                  <td>-</td>
                  <td v-for="(weekItem,weekIndex) in item.weeksNum" :key="weekIndex">{{weekItem==0?'-':weekItem}}</td>
                  <td v-for="(monthItem,monthIndex) in item.monthNum" :key="monthIndex">{{monthItem==0?'-':monthItem}}</td>
                  <td v-for="(otherItem,otherIndex) in item.otherNum" :key="otherIndex">{{otherItem==0?'-':otherItem}}</td>

                </tr>

              </tbody>
            </table>
            <lay-empty v-else></lay-empty>
          </div>

        </el-scrollbar>
      </div>
    </div>

    <el-slider v-if="max>0" v-model="sliderValue" type="success" :max="max" :format-tooltip="formatTooltip" @input="inputSlider" />

  </div>
</template>
 
<script setup lang="ts">
import http from "@/http/index";
import { ref, onMounted } from "vue";
import { layer } from "@layui/layer-vue";

const classWidth = ref(["left-i", "left-name", "left-unblended", "left-finished"]);
const classWidthName = ref(["pst-i", "pst-name", "pst-unblended", "pst-finished"]);

const max = ref(0);
const sliderValue = ref(0);
const innerRef = ref();
const scrollbarRef = ref();
const tableRef = ref();
const indexRef = ref();
const maxHeight = ref(0);

// 日期范围
const data_value = ref("");

// 禁止选择的逻辑
const disabledDate = (time) => {
  // 获取当前日期
  const now = new Date();
  // 清除小时等信息，以便只比较年月日
  now.setHours(0, 0, 0, 0);

  // 清除参数时间的日以下的部分
  const incomingDate = new Date(time);
  incomingDate.setHours(0, 0, 0, 0);

  // 如果参数时间大于等于当前时间，则禁止选择
  return incomingDate > now;
};

const reset = async () => {
  data_value.value = "";
  beginTime.value = "";
  endTime.value = "";
  await get_all_report_list();
};
 
const data_change = async (e) => {
  data_value.value = e
  console.log(e);
  beginTime.value = e[0];
  endTime.value = e[1];
  await get_all_report_list();
};
onMounted(async () => {
  // console.log(innerRef.value.clientWidth);
  await get_all_report_list();

  try {
    setTimeout(() => {
      // console.log(tableRef.value.clientWidth);
      // console.log(indexRef.value.clientWidth);
      maxHeight.value = indexRef.value.clientWidth - 320;
      max.value = tableRef.value.clientWidth - 961 || 0;

      
    }, 100);
  } catch (err) {
    console.log(err);
  }

  // max.value = innerRef.value!.clientHeight - 380
});

const inputSlider = (value: number) => {
  console.log(value);

  // scrollbarRef.value!.setScrollTop(value)
  scrollbarRef.value!.setScrollLeft(value);
};
const scroll = ({ scrollTop, scrollLeft }) => {
  console.log(scrollTop, scrollLeft);

  sliderValue.value = scrollLeft;
};
const formatTooltip = (value: number) => {
  console.log(value);

  return `${value} px`;
};
// 导出报表
const export_tab = async () => {
  const res = await http.corsApi(
    "/report/downloadNonOfficeExcel",
    "get",
    {
      beginTime: beginTime.value,
      endTime: endTime.value,
    },
    { is_msg: false, formData: true }
  );
  console.log(res);
  if (res.data) {
    // res 为后端返回的响应对象
    let blob = new Blob([res.data]);
    let url = window.URL.createObjectURL(res.data);
    let a = document.createElement("a");
    a.href = url;
    a.download = decodeURI(res.headers["content-disposition"])?.split("filename=")[1]?.replace(/"/g, "") || new Date().getTime() + ".xls";
    a.click();
    window.URL.revokeObjectURL(url);
    layer.msg("导出成功", { icon: 1, time: 2000 });

    console.log(decodeURI(res.headers["content-disposition"]).split("filename=")[1].replace(/"/g, ""));
  }
};

const beginTime = ref("");
const endTime = ref("");
const allInfo = ref([]);
// 获取大报表列表
const get_all_report_list = async () => {
  const res = await http.corsApi("/report/excelInfo", "get", {
    // beginTime: beginTime.value,
    // endTime: endTime.value,
    date:data_value.value
  });

  console.log(res);
  allInfo.value = res.data;
};
</script>

<style scoped lang="scss">
.pst-l {
  position: sticky;
  left: 0;
  border: 0 none !important;
  padding: 0 !important;
  z-index: 10;

  background-color: #fafafa;
  > div {
    // width: 100%;
    height: 32px;
    border-top: 1px solid #eee !important;
    border-right: 1px solid #eee !important;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.pst-i {
  position: sticky;
  left: 0;
  z-index: 10;
  border: 0 none !important;
  padding: 0 !important;
  background-color: #fafafa;
  // border-top: 1px solid #eee !important;
  // border-right: 1px solid #eee !important;
}
.pst-name {
  position: sticky;
  left: 65px;
  border: 0 none !important;
  padding: 0 !important;
  z-index: 10;
  // border-top: 1px solid #eee !important;
  // border-right: 1px solid #eee !important;
  background-color: #fafafa;
}
.pst-unblended {
  position: sticky;
  left: 150px;
  z-index: 10;
  // border-right: 3px solid #eee !important;
  border: 0 none !important;
  padding: 0 !important;
  background-color: #fafafa;
  z-index: 100;
  // border-top: 1px solid #eee !important;
  // border-right: 1px solid #eee !important;
}
.pst-finished {
  position: sticky;
  border: 0 none !important;
  padding: 0 !important;
  left: 245px;
  z-index: 10;
  background-color: #fafafa;
  // border-top: 1px solid #eee !important;
  // border-right: 1px solid #eee !important;
  >div{
    border-right: 0 none !important;
  }
}

.left-i {
  width: 65px;
  border-top: 1px solid #eee;
  border-right: 1px solid #eee;
  height: 29px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.left-name {
  width: 85px;
  border-top: 1px solid #eee;
  border-right: 1px solid #eee;
  height: 29px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.left-unblended {
  width: 95px;
  border-top: 1px solid #eee;
  border-right: 1px solid #eee;
  height: 29px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.left-finished {
  width: 95px;
  border-top: 1px solid #eee;
  height: 29px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.margin_box {
  border: 1px solid #eee;
  // max-height: 100%;
  height: 100%;
  // max-height: 600px;
}
.rep_table_index {
  width: 100%;
  max-height: 80%;
  padding: 20px;
  box-sizing: border-box;
  h2 {
    text-align: center;
    margin-bottom: 50px;
  }

  .report_table {
    border-collapse: collapse;
    min-width: 600px;
    border-collapse: collapse;
    border-spacing: 0;
    background-color: #fff;
    color: #666666;
    table-layout:fixed thead {
      background-color: #fafafa;
      position: sticky;
      top: 0;
    }
    thead tr {
      th {
        font-weight: 400;
        background-color: #fafafa;
      }
    }

    td,
    th {
      padding: 6px 12px;
      white-space: nowrap;
      text-align: center;

      // border: 1px solid #999;
    }
  }

  table {
    border-collapse: collapse;
  }
  th,
  td {
    border: 1px solid #eee;
  }
  tr td:first-child,
  tr th:first-child {
    border-left: 0;
  }
  tr td:last-child,
  tr th:last-child {
    border-right: 0;
  }
  tr:first-child td,
  tr:first-child th {
    border-top: 0px;
  }
  tr:last-child td {
    border-bottom: 0px;
  }
}

.el-slider {
  --el-slider-main-bg-color: #36b368;
}
.el-scrollbar {
  // max-height: 600px;
  // height: auto !important;
}
</style>